import { Col, Row } from 'antd';
import { FooterToolbar, PageContainer } from '@ant-design/pro-layout';
import './index.less'
import ProCard from '@ant-design/pro-card';
import { DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
import React, { useState } from 'react';
import { ILCComponentType, ILCJsonContext } from '@/lib/interface/ILCInterface';
import ProForm from '@ant-design/pro-form';
import LCInput from '@/lib/component/input';
import ComponentWrap from '@/lib/lnternalComponent/componentWrap';
import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import FormItemWrap from '@/lib/lnternalComponent/formItemWrap';
import ArrayUtil from '@/lib/utils/arrayUtil';

interface IIndexProps {

}



const BaseDropable: React.FC = (props) => {
    const { isOver, setNodeRef } = useDroppable({
        id: 'baseDroppable',
    });
    const style = {
        backgroundColor: isOver ? '#ededed' : undefined,
        height: "100%"
    };

    return (
        <div ref={setNodeRef} style={style} className='index-basedroppable-wrap' >
            {props.children}
        </div>
    );
}

const Index: React.FC<IIndexProps> = (props) => {
    const formConfig = React.useMemo(() => {
        return [LCInput]
    }, [])
    const [formContxt, setFormContxt] = useState<ILCJsonContext[]>([]);
    const onDragEnd = React.useCallback((e: DragEndEvent) => {
        if (!e.over) {
            return;
        }
        if (e.over.id.startsWith("c_")) {
            // 组件排序
            const activeIndex = e.active.data.current?.sortable.index;
            const overIndex = e.over.data.current?.sortable.index;
            setFormContxt((contexts) => {
                let newItems;
                newItems = ArrayUtil.arrayMove(contexts, activeIndex, overIndex);
                return newItems;
            })
        }
        else if (e.over.id === "baseDroppable") {
            const _find = formConfig.find(p => p.type === e.active.id)!;
            if (!_find) {
                return;
            }
            setFormContxt([
                ...formContxt,
                {
                    type: _find?.type,
                    props: _find.defaultProps()
                }
            ])
        }
    }, [formContxt]);
    const onDragOver = React.useCallback((e: DragEndEvent) => {
        // if (e.over) {
        //     if (e.over.id === "baseDroppable") {
        //         const _find = formConfig.find(p => p.type === e.active.id)!;
        //         console.log(9999, formContxt);
        //         setFormContxt([
        //             ...formContxt,
        //             {
        //                 type: _find?.type,
        //                 props: _find.defaultProps()
        //             }
        //         ])
        //     }
        // }
    }, [formContxt]);
    const sensors = useSensors(
        useSensor(PointerSensor),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates
        })
    );

    return (
        <PageContainer
            className='index'
        >
            <DndContext
                onDragOver={onDragOver}
                onDragEnd={onDragEnd}>
                <ProCard className='index-card' split="vertical">
                    <ProCard title="组件库" colSpan={"200px"} headerBordered style={{ height: "100%" }}>
                        <Row gutter={[8, 8]} >
                            {
                                formConfig.map(p => {
                                    return (
                                        <Col span={24} key={p.type} >
                                            <ComponentWrap {...p} />
                                        </Col>
                                    )
                                })
                            }
                        </Row>
                    </ProCard>
                    <ProCard title="左右分栏子卡片带标题" headerBordered style={{ height: "100%" }}>
                        <ProForm
                            style={{ height: "100%" }}
                            submitter={{
                                render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
                            }}
                        >
                            <BaseDropable >
                                <SortableContext id="123" items={formContxt.map(p => p.props.name)} strategy={rectSortingStrategy}>
                                    {
                                        formContxt.map(p => {
                                            let _find = formConfig.find(sp => p.type === sp.type)!;
                                            return (
                                                <FormItemWrap {...p} key={p.props.name}>
                                                    {
                                                        React.createElement(_find.component, { ...p.props })
                                                    }
                                                </FormItemWrap>
                                            )
                                        })
                                    }
                                </SortableContext>

                            </BaseDropable>
                        </ProForm>
                    </ProCard>
                </ProCard>
            </DndContext>
        </PageContainer>

    )
}

export default Index;